// 定义一个名为 RoleForm 的对象，用作 Vue 组件
const DeptForm = {
    // 组件名称
    name: 'DeptForm', // 组件模板
    template: `  
       
<el-dialog v-model="visible" :title="formData.id ? '编辑部门' : '添加部门'"
           width="960" @close="close">
  <el-form
      :model="formData"
      :rules="rules"
      label-width="100px"
      label-position="right"
      size="default"
  >
    <!-- 第一行：书名和作者 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="部门名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入部门名"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="负责人" prop="manager">
          <el-input v-model="formData.manager" placeholder="请输入负责人"/>
        </el-form-item>
      </el-col>
    </el-row>


  </el-form>
  <template #footer>
    <div style="text-align: right; padding: 10px;">
<!--      <el-button @click="resetForm">重置</el-button>-->
      <el-button type="primary" @click="submitForm">{{formData.id ? '更新部门' : '添加部门'}}</el-button>
    </div>
  </template>
</el-dialog>
  `, components: {
        FileUpload, ImageUpload
    }, // 组件属性
    props: {
        // 控制表单弹窗的显示与隐藏
        visible: {
            type: Boolean, default: false
        }, // 从父组件传入的图书数据
        deptData: {
            type: Object, default: () => ({})
        }, categories: {
            type: Array, default: () => []
        }
    }, // 自定义事件
    emits: ['update:visible', 'submit'], // 组件设置函数

    setup(props, {emit}) {

        // 表单数据的初始值
        const initialValue = {
            name: '新增部门111',
            manager: '我',
        }

        //  表单数据
        const formData = Vue.ref({})

        // 表单验证规则
        const rules = ref({
            name: [{required: true, message: '请输入部门标题', trigger: 'blur'}],
            manager: [{required: true, message: '请输入 负责人', trigger: 'blur'},],
        })


        // 提交表单
        const submitForm = () => {
            emit('submit', {...formData.value});
        };

        // 图片上传成功回调
        const handleCoverUpload = (uploadFile) => {
            console.log("图片上传完成");
            // 将上传成功的文件 URL 赋值给 formData.coverUrl
            formData.value.coverUrl = uploadFile.fileUrl;
        };
        // 图片删除成功回调
        const handleCoverDelete = () => {
            // 将文件 URL 赋值给 formData.coverUrl
            formData.value.coverUrl = '';
        };

        // 文件上传成功回调
        const handleAttachFileUpload = (uploadFile) => {
            formData.value.attachmentUrl = uploadFile.fileUrl;
        };

        // 文件删除成功回调
        const handleAttachFileDelete = () => {

            // 将文件 URL 赋值给 formData.coverUrl
            formData.value.attachmentUrl = '';
        };

        // 关闭弹框
        const close = () => {
            emit('update:visible', false);
        };

        // 监听 deptData 的变化，同步更新表单数据
        // 监听 deptData 的变化，同步更新表单数据
        Vue.watch(() => props.deptData, (newdeptData) => {
            formData.value = newdeptData ? {...newdeptData} : {...initialValue};
        }, {immediate: true});


        // 返回表单数据及方法
        return {
            formData,
            rules,
            submitForm,
            close,
            handleCoverUpload,
            handleCoverDelete,
            handleAttachFileUpload,
            handleAttachFileDelete,
        };
    }
};
